/* BEM var
 -------------------------- */

//#region Color
$--color-primary: #409EFF !default;
$--color-white: #FFFFFF !default;
$--color-black: #000000 !default;

$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

$--color-success: #80e050 !default;
$--color-warning: #ffbb55 !default;
$--color-danger: #ff5252 !default;
$--color-info: #909399 !default;
$--color-disabled: #bbbbbb !default;

$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
$--color-info-light: mix($--color-white, $--color-info, 80%) !default;

$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;

$--color-text-primary: #303133 !default;
$--color-text-regular: #606266 !default;
$--color-text-secondary: #909399 !default;
$--color-text-placeholder: #C0C4CC !default;

$--border-color-base: #DCDCDC !default;
$--border-color-light: #E4E7ED !default;
$--border-color-lighter: #EBEEF5 !default;
$--border-color-extra-light: #F2F6FC !default;
//#endregion

//#region font-size
$--font-size-base: 14px !default;
$--font-size-medium: 14px !default;
$--font-size-small: 12px !default;
$--font-size-mini: 12px !default;
//#endregion

//#region Background
$--background-color-base: #F5F7FA !default;
//#endregion

//#region border
$--border-base:1px solid $--border-color-base;
$--border-radius-base:6px;
//#endregion

//#region //#endregion


/* components */ 

//#region Button
$--button-default-background-color: transparent !default;
$--button-default-font-color: $--color-text-primary !default;
$--button-default-border: 1px solid $--color-primary-light-8 !default;
//#endregion



/* BEM config
 -------------------------- */
$namespace: 'sn'; // B 
$element-separator: '__'; // E $snine-element-separator
$modifier-separator: '--'; // M $snine-modifier-separator
$state-prefix: 'is-';


/* BEM support Func
 -------------------------- */
//#region
@function selectorToString($selector) {
  $selector: inspect($selector);
  $selector: str-slice($selector, 2, -2);
  @return $selector;
}

// 是否 包含修饰符
@function containsModifier($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, $modifier-separator) {
    @return true;
  } @else {
    @return false;
  }
}

// 是否 包含 'is' 状态判断
@function containWhenFlag($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, '.' + $state-prefix) {
    @return true
  } @else {
    @return false
  }
}

@function containPseudoClass($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, ':') {
    @return true
  } @else {
    @return false
  }
}

/* 集成 所有判断 
 -------------------------- */
@function hitAllSpecialNestRule($selector) {
  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
}
//#endregion

/* Mixin
 -------------------------- */
//#region
@mixin b($block) {
  $B: $namespace + "-" + $block !global;

  .#{$B} {
    @content;
  }
}

// 定义了一个名为 “e” 的 mixin，并接受一个参数 $element。
@mixin e($element) {
  // 定义了一个全局变量 $E，其值为 $element。
  $E: $element !global;
  // 定义了一个变量 $selector，其值为 &，表示父选择器。
  $selector: &;
  // 定义了一个变量 $currentSelector，其初始值为空字符串。
  $currentSelector: "";
  // 开始一个循环，将 $element 中的每个元素赋值给 $unit。
  @each $unit in $element {
    // $currentSelector 是当前的选择器。
    // "." 是选择器前缀，表示类选择器。
    // $B 是一个占位符，可能是为了保留特定位置的字符。
    // $element-separator 是一个分隔符，用于将元素名称与前缀和后缀分隔开。
    // $unit 是当前循环的元素。
    // "," 是选择器后缀，表示选择器以逗号结束。
    $currentSelector: #{$currentSelector +
      "." +
      $B +
      $element-separator +
      $unit +
      ","};
  }

  // UN UN UN hitAllSpecialNestRule
  @if hitAllSpecialNestRule($selector) {
    //使用条件语句判断是否满足特定条件
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          // UN UN UN @content 表示将 mixin 中包含的内容作为 CSS 规则的主体。
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector +
      & +
      $modifier-separator +
      $unit +
      ","};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

// 条件
@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}
// 颜色
@mixin commonShadow($color) {
  @if $color== "primary" {
    color: $--color-white;
    background-color: $--color-primary;
    &.is-text {
      color: $--color-primary !important;
    }
    &:hover {
      border: 1px solid $--color-primary-light-8 !important;
    }
  }
  @if $color== "success" {
    color: $--color-white;
    background-color: $--color-success;
    &.is-text {
      color: $--color-success !important;
    }
    &:hover {
      border: 1px solid $--color-success-light !important;
    }
  }
  @if $color== "warning" {
    color: $--color-white;
    background-color: $--color-warning;
    &.is-text {
      color: $--color-warning !important;
    }
    &:hover {
      border: 1px solid $--color-warning-light !important;
    }
  }
  @if $color== "danger" {
    color: $--color-white;
    background-color: $--color-danger;
    &.is-text {
      color: $--color-danger !important;
    }
    &:hover {
      border: 1px solid $--color-danger-light !important;
    }
  }
  @if $color== "info" {
    color: $--color-white;
    background-color: $--color-info;
    &.is-text {
      color: $--color-info !important;
    }
    &:hover {
      border: 1px solid $--color-info-light !important;
    }
  }
  @if $color== "disabled" {
    opacity: 0.66;
    cursor: not-allowed;
  }
  @if $color== "loading" {
    opacity: 0.66;
    cursor: auto;
    pointer-events: none; // 禁止点击事件
  }
}

// 类型
/** @param $name 选择器 */
@mixin commonType($name) {
  // 默认样式
  .#{$name} {
    color: $--button-default-font-color;
    background: $--button-default-background-color;
  }
  //拼合选择器 'sn-elname--'
  $curName: #{$name + $modifier-separator};
  @each $type in (primary, success, warning, danger, info) {
    .#{$curName}#{$type} {
      @include commonShadow($type);
    }
  }
}

// 尺寸
/** @param $name 选择器 */
@mixin commonSize($name) {
  // 默认尺寸
  .#{$name} {
    font-size: $--font-size-base;
    padding: 10px 12px;
  }
  //拼合选择器 'sn-elname--'
  $curName: #{$name + $modifier-separator};
  @each $type in (medium, small, mini) {
    .#{$curName}#{$type} {
      @if $type == "medium" {
        font-size: $--font-size-medium;
        padding: 8px 10px;
      }
      @if $type == "small" {
        font-size: $--font-size-small;
        padding: 6px 8px;
      }
      @if $type == "mini" {
        font-size: $--font-size-mini;
        padding: 4px 6px;
      }
    }
  }
}
//#endregion